<template>
	<el-row class="grill-row-home margin-b-0">
		<el-col :span="6" align="center">
			<el-card class="layout-home grill-col-home border-none">
				<h2>890</h2>
				<p>全年审批</p>
			</el-card>
		</el-col>
		<el-col :span="6" align="center">
			<el-card class="layout-home grill-col-home border-none">
				<h2>85</h2>
				<p>审批中</p>
			</el-card>
		</el-col>
		<el-col :span="6" align="center">
			<el-card class="layout-home grill-col-home border-none">
				<h2>705</h2>
				<p>已完成</p>
			</el-card>
		</el-col>
		<el-col :span="6" align="center">
			<el-card class="layout-home grill-col-home border-none">
				<h2>100</h2>
				<p>已撤销</p>
			</el-card>
		</el-col>
	</el-row>
	<el-divider style="margin: 0"></el-divider>
	<el-row class="grill-row-home">
		<p>各类型审批数量</p>
		<div id="chart" style="width: 100%; height: 40vh"></div>
	</el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'

const option = {
	color: '#ff6633',
	barWidth: '40%',
	title: {
		left: '32px',
		text: ' ',
		subtext: '单位（人）',
		subtextStyle: {
			height: 20
		}
	},
	tooltip: {},
	legend: {},
	xAxis: {
		data: ['入职', '转正', '离职', '调薪', '请假', '调岗', '外出', '加班', '补卡', '领用', '退库', '借用', '归还', '调拨']
	},
	yAxis: {},
	series: [
		{
			type: 'bar',
			data: [110, 580, 430, 280, 110, 430, 530, 280, 110, 215, 245, 475, 185, 110],
			itemStyle: {
				borderRadius: [4, 4, 0, 0]
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#00000066'
				}
			}
		}
	]
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById('chart'))
	chart.setOption(option)
}, 500)
</script>
<style scoped>
.border-none {
	border: 0px;
}

.margin-b-0 {
	margin: 0px;
}
p {
	font-size: 6px;
	color: #00000066;
}
</style>
